<template>
  <div class="wrap-bg">
    <div class="head-box h-400" :style="{background: `url(${getAssetsImages('copyright-head-bg')}) no-repeat`, 'background-size': '100% 100%'}">
    </div>
    <div class="content padlr320">
        <div class="head-tit pad-t60">聚合更多优势资源，助力企业创新发展</div>
        <div class="head-tips mar-t17">精准匹配全国创新政策，让创新研发更轻松</div>
        <div class="head-search-box padlr20 mar-t38">
            <div class="search-ipt flex-a">
                <div class="search-l  flex-a">
                    <div class="l-menu pad-l18 flex-a">
                        <el-dropdown>
                            <div class="flex-a search-txt ">
                                <div class="mar-r8 w-28">中国</div>
                                <el-icon>
                                    <caret-bottom size="12" />
                                </el-icon>
                            </div>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>中国</el-dropdown-item>
                                    <el-dropdown-item>Action 2</el-dropdown-item>
                                    <el-dropdown-item>Action 3</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        
                    </div>
                    <div class="search-line marlr20 "></div>
                    <div class="search-icon mar-r10">
                        <el-image 
                            style="width: 20px; height: 20px" 
                            :src="getAssetsImages('search-icon')" 
                        />
                    </div>
                    <el-input
                        v-model="searchKey"
                        style="height: 56px; "
                        placeholder="请输入商标名称、申请号或申请人名称"
                    >
                    </el-input>
                </div>
                <div class="search-btn ">
                    免费查询能否登记
                </div>
            </div>
            <div class="head-card mar-t40 flex ju-bt">
                <div 
                    class="card-li flex-a"
                    v-for="(item, index) in headCardList"
                    :key="index"
                >
                    <el-image 
                        style="width: 180px; height: 180px" 
                        :src="getAssetsImages(item.img)" 
                    />
                    <div class="li-info pad-l30">
                        <div class="info-name">
                            {{ item.title }}
                        </div>
                        <div class="info-tips ma-t11">
                            {{ item.describe }}
                        </div>
                        <div class="info-btn mar-t15" @click="toPath(item)">
                            立即体验
                        </div>
                    </div>
                </div>
            </div>
            <div class="works-block mar-t80">
                <div class="block-tit">{{  worksModule?.worksInfo?.title }}</div>
                <div class="works-list flex ju-bt flex-wrap mar-t30">
                    <div 
                        class="works-li pad20 mar-t20"
                        v-for="(item, index) in worksModule?.worksInfo?.child"
                        :key="index"
                        :style="{
                            background: index === worksModule.worksCurrent ? `url(${getAssetsImages('works-card-bg')}) no-repeat` : '' , 
                            'background-size': '100% 100%'
                        }"
                        @click="worksModule.worksCurrent = index"
                    >
                        <div class="works-name flex-a ju-bt">
                            <div>{{ item.title }}</div>
                            <el-image 
                                style="width: 30px; height: 30px" 
                                :src="getAssetsImages('arrows-icon')" 
                                @click="toPath(item)"
                            />
                        </div>
                        <div class="works-tips">{{ item.describe }}</div>
                    </div>
                </div>
            </div>
        </div>

        <service-module :serviceInfo="serviceInfo" @toPath="toPath"></service-module>
    </div>
    <service-process :service_id="service_id" parentType="tos"></service-process>
    <advantage :service_id="service_id" parentType="tos"></advantage>
    <find-out-details></find-out-details>
  </div>
</template>

<script setup>
/**
 * 版权服务
*/
import { ref, reactive } from "vue"
// 服务流程组件
import serviceProcess from "@/components/serviceProcess/index.vue"
// 平台优势组件
import advantage from "@/components/advantage/advantage.vue"
// 了解详情组件
import findOutDetails from "@/components/findOutDetails/index.vue"
// 服务模块组件
import serviceModule from "@/components/serviceModule/index.vue"
import serviceApi from "@/api/modules/trademarkService.js"
const router = useRouter();
const route = useRoute()
const service_id = ref(route.query.id ?? '')
const toPath = item => {
    if(!item) return
       router.push({
        path: 'productDetail',
        query: {
            id: item.id,
            title: item.title,
        }
    });
};
let searchKey = ref("")
let headCardList = ref([])
const worksModule = reactive({
    worksInfo: {},
    worksCurrent: 0
})
// 著作权延申服务
let serviceInfo = ref({})
// 获取列表
const getList = () => { 
    return serviceApi.getList({
        type: service_id.value,
        is_all: 1
    }).then(res => { 
        headCardList.value = res.data[0].child;
        worksModule.worksInfo = res.data[1];
        serviceInfo.value = res.data[2];
    })
}
getList();
const getAssetsImages = name => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.works-block {
    .works-list {
        .works-li {
            width: 49%;
            height: 94px;
            background: linear-gradient(180deg,#f0f3f7, #ffffff);
            border: 2px solid #ffffff;
            border-radius: 4px;
            box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
            .works-name {
                font-size: 16px;
                font-family: PingFang SC, PingFang SC-Semibold;
                font-weight: Semibold;
                text-align: left;
                color: #181818;
            }
            .works-tips {
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: Regular;
                text-align: left;
                color: #575966;
            }
        }
    }
}
.head-card {
    .card-li {
        width: 49%;
        // width: 630px;
        height: 180px;
        background: linear-gradient(180deg,#fafbfc, #ffffff);
        border: 2px solid #ffffff;
        box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
        .li-info {
            .info-name {
                font-size: 24px;
                font-family: PingFang SC, PingFang SC-Semibold;
                font-weight: Semibold;
                text-align: left;
                color: #202020;
            }
            .info-tips {
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: Regular;
                text-align: left;
                color: #222426;
            }
            .info-btn {
                width: 100px;
                height: 30px;
                background: #0052d9;
                border-radius: 2px;
                font-size: 12px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: Regular;
                text-align: center;
                color: #ffffff;
                line-height: 30px;
            }
        }
    }
}

.block-tit {
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #202020;
}
:deep(.search-txt:focus) {
  outline: none;
}
:deep(.el-input__wrapper) {
    box-shadow: none;
    flex-grow: 0;
    background: transparent ;
    width: 100%;
}
.content {
    position: relative;
    .head-tit {
        font-size: 36px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: left;
        color: #202020;
        text-align: center;
    }
    .head-tips {
        font-size: 18px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: center;
        color: #575966;
    }
    .head-search-box {
    .search-ipt {
        background: #ffffff;
        .search-l {
            width: calc(100% - 120px);
            height: 56px;
            border: 1px solid #1752d9;
            border-radius: 4px 0 0 4px;
            .l-menu {
                .search-txt {
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Medium;
                    font-weight: Medium;
                    text-align: left;
                    color: #222426;
                }
            }
            .search-line {
                width: 1px;
                height: 29px;
                background-color: #e5e8eb;
            }
        }
        .search-btn {
            width: 160px;
            height: 56px;
            background: #0052d9;
            border-radius: 0px 4px 4px 0px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: Medium;
            text-align: center;
            color: #ffffff;
            line-height: 56px;
        }
    }
}
}
.head-box {
    width: 100%;
    position: absolute;

}
</style>